var DeptData = {};
var GameData = {};

// 本地服务器
var socket = null;

/**
 * 发送包给服务端
 * @param {string} type
 * @param {Record<string, any>} data
 */
function send(type, data) {
	if (socket) socket.emit(type, data);
}
/**
 * 更新卡牌和部门选择状态
 * @param {jQuery} cardElement - 当前选中的卡牌元素
 * @param {boolean} isSelecting - 是否正在选择卡牌
 */
function updateSelectionState(cardElement, isSelecting) {
	// 清除所有卡牌和部门的选中状态
	$(".card").removeClass("prepare");
	$(".dept-progress").removeClass("dept-selected");

	// 如果正在选择卡牌
	if (isSelecting) {
		const card = DeptData.handCards[Game.cardState];
		cardElement.addClass("prepare");

		// 根据卡牌目标类型高亮部门
		if (card.target === "all") {
			$(".dept-progress").addClass("dept-selected");
		} else if (GameData[card.target]) {
			$(`#${card.target}`).addClass("dept-selected");
		}
		console.log("已更新卡牌状态:", card.target, DeptData.handCards[Game.cardState]);
	}
}

const Sounds = {
	click: new Howl({ src: ["./assets/sounds/click.ogg"], volume: 0.5 })
};

function sendShowScene(scene) {
	$("#main").removeClass("active");
	$("#room").removeClass("active");
	$("#game").removeClass("active");
	$(scene).addClass("active");
}

var Room = {
	/**
	 * 渲染部门
	 */
	deptRender() {
		$("#departments").empty();
		for (let deptId in GameData) {
			var dept = GameData[deptId];
			var element = $(`<div id="room_${deptId}" class="department" data-dept="${deptId}">
                    	<div class="dept-icon">${dept.icon}</div>
                    	<h3>${dept.name}</h3>
                    	<div class="status">空闲</div>
                	</div>`)
				// 触发点击效果
				.on("click", () => {
					Sounds.click.play();
					// 如果有其他玩家已选择该部门则无法选择
					if ($(this).hasClass("occupied")) return;
					// 删除全部部门的已选择效果
					$(".department").removeClass("selected");
					// 给该部门添加已选择效果
					$(this).addClass("selected");
					// 发送包给后端
					send("selectDept", deptId);
				});
			// 添加到元素
			$("#departments").append(element);
		}
	}
};

var Game = {
	cardMap: {},
	lastCardState: null,
	/**
	 * 发送消息
	 * @param {string} message
	 */
	sendMessage(message) {
		var element = $(`<div class="event-entry">${message}</div>`);
		// 添加到文本

		$("#event-content").append(element);
		$("#event-log").animate({ scrollTop: $("#event-content").height() }, 1);
	},

	/**
	 * 渲染部门力量
	 */
	deptPowerRender() {
		for (let deptId in GameData) {
			var dept = GameData[deptId];
			// 修改文本
			$(`#${deptId}-value`).text(`${dept.power}%`);
			// 修改进度
			$(`#${deptId}-progress`).val(dept.power);
		}
	},

	/**
	 * 渲染部门数据
	 */
	deptDataRender() {
		// 删除原有HTML内容
		$("#local-data").empty();
		for (let dataId in DeptData.data) {
			var deptData = DeptData.data[dataId];
			var element = $(`<div>${deptData.text}: <span id="${dataId}">${deptData.value + deptData.unit}</span></div>`);
			// 添加到元素
			$("#local-data").append(element);
		}
	},

	/**
	 * 渲染部门行动点
	 */
	deptPointRender() {
		$("#actions-left").text(DeptData.point);
	},

	/**
	 * 渲染部门卡牌(优化版)
	 */
	deptCardRender() {
		var handElement = $("#hand");
		var newCards = DeptData.handCards;

		// 首次渲染或卡牌数量变化时完全重新渲染
		if (!this.lastCardState || this.lastCardState.length !== newCards.length) {
			this.fullCardRender(newCards, handElement);
		} else {
			// 增量更新现有卡牌
			this.updateExistingCards(newCards, handElement);
		}

		// 保存当前卡牌状态
		this.lastCardState = [...newCards];

		// 调整卡牌布局
		this.adjustCardLayout();
	},

	/**
	 * 完全重新渲染卡牌
	 */
	fullCardRender(newCards, handElement) {
		// 清除现有卡牌
		handElement.empty();
		this.cardMap = {};

		// 创建所有卡牌
		for (let i = 0; i < newCards.length; i++) {
			this.createCardElement(i, newCards[i], handElement);
		}
	},

	/**
	 * 增量更新现有卡牌
	 */
	updateExistingCards(newCards, handElement) {
		for (let i = 0; i < newCards.length; i++) {
			const card = newCards[i];
			const lastCard = this.lastCardState[i];

			// 如果卡牌不存在，创建新元素
			if (!this.cardMap[i]) {
				this.createCardElement(i, card, handElement);
			}
			// 如果卡牌内容发生变化，更新现有元素
			else if (!this.isCardEqual(card, lastCard)) {
				this.updateCardElement(i, card);
			}

			// 更新卡牌状态(禁用/启用)
			this.updateCardState(i, card);
		}
	},

	cardState: null,
	playeridState: null,
	/**
	 * 创建卡牌元素
	 */
	createCardElement(index, card, handElement) {
		const element = $(`<div class="card" id="card-${index}">
            <div class="cardss" style="background-image: url(${card.background});">
                <div class="card-cost">${card.costPoint}</div>
                <div class="card-title">${card.title}</div>
                <div class="card-desc">${card.desc}</div>
                <div class="card-effect">${card.type}</div>
            </div>
        </div>`);

		// 添加到DOM和映射
		handElement.append(element);
		this.cardMap[index] = element;

		// 绑定点击事件
		element.on("click", () => {
			Sounds.click.play();
			if (DeptData.point < card.costPoint && DeptData.data.money.value < card.costMoney) {
				Game.sendMessage(`无法打出 ${card.title}`);
				return;
			}
			if (this.cardState != index) {
				this.cardState = index;
				updateSelectionState(element, true); // 更新为选中状态
				return;
			}
			if (this.cardState != null) {
				send("playCard", { index: index, target: DeptData.deptId }); // 使用索引
				this.cardState = null;
				updateSelectionState(null, false); // 清除选中状态
			}
		});

		// 初始状态
		this.updateCardState(index, card);
	},

	/**
	 * 更新卡牌元素内容
	 */
	updateCardElement(index, card) {
		const element = this.cardMap[index];
		element.find(".card-cost").text(card.costPoint);
		element.find(".card-title").text(card.title);
		element.find(".card-desc").text(card.desc);
		element.find(".card-effect").text(card.type);
	},

	/**
	 * 更新卡牌状态(禁用/启用)
	 */
	updateCardState(index, card) {
		const element = this.cardMap[index];
		if (!element) return;

		if (DeptData.point < card.costPoint || DeptData.data.money.value < card.costMoney) {
			element.addClass("disabled");
		} else {
			element.removeClass("disabled");
		}
	},

	/**
	 * 比较两张卡牌是否相同
	 */
	isCardEqual(card1, card2) {
		return (
			card1.title === card2.title &&
			card1.desc === card2.desc &&
			card1.costPoint === card2.costPoint &&
			card1.type === card2.type &&
			card1.costMoney === card2.costMoney
		);
	},

	/**
	 * 调整卡牌布局
	 */
	adjustCardLayout() {
		const card_amount = DeptData.handCards.length;
		const card_styles = $(".card");
		const card_header = $("#hand");

		if (card_amount === 0) return;

		// @ts-ignore
		if (card_header.width() > 1 && card_amount * $(".card").width() > card_header.width())
			card_styles.css("width", Math.max(5, Math.floor(100 / card_amount)) + "%");
		console.log(card_amount, Math.floor(100 / card_amount), card_header.width());
	},

	/**
	 * 渲染部门
	 */
	deptRender() {
		$("#global-data").empty();
		// 检索部门
		for (let deptId in GameData) {
			var dept = GameData[deptId];
			var element = $(`<div id='${deptId}' class="dept-progress">
                    <div class="dept-name">
                        <span>${dept.name} (${dept.playerName || `AI-${dept.name}`})</span>
                        <span id="${deptId}-value">0%</span>
                    </div>
                    <progress id="${deptId}-progress" value="0" max="100" style="height: 20px;"></progress>
                </div>`);
			// 添加到元素
			element.on("click", () => {
				Sounds.click.play();
				if (Game.cardState != null) {
					send("playCard", { index: Game.cardState, target: deptId });
					Game.cardState = null;
					updateSelectionState(null, false); // 清除选中状态
				}
			});
			$("#global-data").append(element);
		}
	},

	closeButtonRender() {
		const element = $("<button>", { class: "btn endbuton", text: "关闭房间", css: { "margin-top": "20px" } })
			// 触发点击事件
			.on("click", () => {
				Sounds.click.play();
				$(".department").removeClass("selected");
				send("back");
			});
		// 添加到元素
		$("#hand").append(element);
	}
};
